<template>
  <view class="me">
    <view class="top_box">
      <shopro-navbar
        :class="showTitle == true ? 'biaoti' : 'noneBiaoti'"
        backIconName=""
        backText="我的"
        :backTextStyle="{
          fontSize: '36rpx',
          fontWeight: '400',
          color: '#fff',
        }"
      >
      </shopro-navbar>
      <view class="back_img">
        <img
          :src="
            $IMG_URL + '/uploads/20230429/a9441ef95c280f263b3d5345956c1504.png'
          "
          alt=""
        />

        <view class="me_box">
          <view class="photo" @tap="onAutoLogin">
            <img :src="userInfo.avatar || touxiang" class="photo_img" />
            <img
              src="./images/nan.png"
              v-if="userInfo.gender == 1"
              class="nan_nv"
            />
            <img
              src="./images/nu.png"
              v-if="userInfo.gender == 0"
              class="nan_nv"
            />
          </view>
          <view class="name">{{ userInfo.nickname || '未登录' }}</view>
        </view>
        <view class="two_box">
          <view class="left" @click="onclickHandle('', 'toMyWallet', {})">
            <img
              :src="
                $IMG_URL +
                '/uploads/20230428/19c8eefc9af41288d32841dabc0f63cf.png'
              "
              alt=""
            />
            <text class="yuer_text">余额（元）</text>
            <text
              class="yuer"
              :class="userInfo.money && userInfo.money.length > 5 ? 'mini' : ''"
              >{{
                userInfo.money && userInfo.money.length > 5
                  ? Number(userInfo.money)
                  : userInfo.money || '--'
              }}</text
            >
          </view>
          <view class="right" @click="onclickHandle('', 'toCart', {})">
            <img
              :src="
                $IMG_URL +
                '/uploads/20230428/e65be9e66dedc45d47ec4d2272c6f87b.png'
              "
              alt=""
            />
            <text class="yuer_text">我的盒柜</text>
            <text class="yuer">{{
              boxNumber >= 1000
                ? '999+'
                : boxNumber > 0
                ? boxNumber
                : boxNumber == '0'
                ? boxNumber
                : '--'
            }}</text>
          </view>
        </view>
        <view class="nav">
         <view class="nav_box" @click="onclickHandle('', 'tixing', {})">
            <view class="top">
              <img
                class="top-icon"
                src="@/static/images/doll-1.png"
                mode="widthFix"
              />
            </view>
            <view class="text">免费领娃</view>
          </view>
		  
          <view class="nav_box" @click="onclickHandle('', 'tixing', {})">
            <view class="top">
           
              <img
                class="top-icon"
                src="@/static/images/game-1.png"
                mode="widthFix"
              />
            </view>
            <view class="text">我的抽选</view>
          </view>
          <view class="nav_box" @click="onclickHandle('', 'toCoupon', {})">
            <view class="top">
              <!-- <u-icon name="coupon" color="#474747" size="60"></u-icon> -->
              <img
                class="top-icon"
                src="@/static/images/ment-1.png"
                mode="widthFix"
              />
            </view>
            <view class="text">优惠券</view>
          </view>
		  
         <view class="nav_box" @click="onclickHandle('', 'tixing', {})">
            <view class="top">
              <img
                class="top-icon"
                src="@/static/images/check-1.png"
                mode="widthFix"
              />
            </view>
            <view class="text">兑换中心</view>
          </view>
          <view class="nav_box" @click="onclickHandle('', 'tixing', {})">
          <!-- <view class="nav_box" @click="onclickHandle('', 'distribution', {})"> -->
            <view class="top">
              <img
                class="top-icon"
                src="@/static/images/wallet-1.png"
                mode="widthFix"
              />
            </view>
            <view class="text">我的分销</view>
          </view>
        </view>
      </view>
    </view>
    <view class="main">
      <view class="order">
        <view class="top_line">
          <text class="title">我的订单</text>
          <view class="right" @click="onclickHandle('', 'toAllOrder', {})">
            <text class="all">全部订单</text>
            <u-icon
              name="arrow-right"
              color="#8C8C8C"
              size="18"
              class="right"
            ></u-icon>
          </view>
        </view>
        <view class="nav">
          <view class="box" @click="onclickHandle('', 'toNopay', {})">
            <img src="@/static/images/ment-2.png" alt="" />
            <text>待付款</text>
          </view>
          <view class="box" @click="onclickHandle('', 'toNosend', {})">
            <img src="@/static/images/box-2.png" alt="" />
            <text>待发货</text>
          </view>
          <view class="box" @click="onclickHandle('', 'toNoget', {})">
            <img src="@/static/images/car-1.png" alt="" />
            <text>待收货</text>
          </view>
          <view class="box" @click="onclickHandle('', 'noComment', {})">
            <img src="@/static/images/msg-2.png" alt="" />
            <text>待评价</text>
          </view>
          <view class="box" @click="onclickHandle('', 'afterSales', {})">
            <img src="@/static/images/wallet-2.png" alt="" />
            <text>退款售后</text>
          </view>
        </view>
      </view>
      <swiper
        autoplay
        interval="2000"
        duration="500"
        circular
        class="top-swiper"
      >
        <swiper-item
          class="swiper"
          wx:key="id"
          v-for="(item, index) in imgList"
          :key="index"
        >
          <img :src="item.fullPath" />
        </swiper-item>
      </swiper>
      <view class="server">
        <view class="title">我的服务</view>
        <view class="server_box">
        <!-- <view class="box" @click="onclickHandle('', 'inprops', {})">
            <view class="tubiao">
              <img src="@/static/images/idea-2.png" alt="" />
            </view>
            <view class="text">我的道具</view>
          </view> -->
          <view class="box" @click="onclickHandle('', 'tixing', {})">
            <view class="tubiao">
              <img src="@/static/images/cocess-2.png" alt="" />
            </view>
            <view class="text">商务合作</view>
          </view>
          <view class="box" @click="onclickHandle('', 'toHis', {})">
            <view class="tubiao">
              <img src="@/static/images/text-2.png" alt="" />
            </view>
            <view class="text">浏览足迹</view>
          </view>
          <view class="box" @click="onclickHandle('', 'toMyAddress', {})">
            <view class="tubiao">
              <img src="@/static/images/pos-2.png" alt="" />
              <!-- <view class="iconfont icon-dizhi"></view> -->
            </view>
            <view class="text">我的地址</view>
          </view>
          <view class="box" @click="onclickHandle('', 'tixing', {})">
            <view class="tubiao">
              <img src="@/static/images/help-2.png" alt="" />
              <!-- <view class="iconfont icon-bangzhuzhongxin"></view> -->
            </view>
            <view class="text">帮助中心</view>
          </view>
          <view class="box" @click="onclickHandle('', 'tixing', {})">
            <view class="tubiao">
              <img src="@/static/images/info-2.png" alt="" />
              <!-- <view class="iconfont icon-guanyuwomen"></view> -->
            </view>
            <view class="text">关于我们</view>
          </view>
          <view class="box" @click="onclickHandle('', 'tixing', {})">
            <view class="tubiao">
              <img src="@/static/images/edit-2.png" alt="" />
              <!-- <view class="iconfont icon-yijianfankui"></view> -->
            </view>
            <view class="text">意见反馈</view>
          </view>
          <view class="box" @click="onclickHandle('', 'tixing', {})">
            <view class="tubiao">
              <img src="@/static/images/look-2.png" alt="" />
              <!-- <view class="iconfont icon-lianxikefu"></view> -->
            </view>
            <view class="text">联系客服</view>
          </view>
          <view class="box" @click="onclickHandle('', 'togerenxinxi', {})">
            <view class="tubiao">
              <img src="@/static/images/set-2.png" alt="" />
              <!-- <view class="iconfont icon-yunongtonggengduoshezhi"></view> -->
            </view>
            <view class="text">更多设置</view>
          </view>
        </view>
      </view>
    </view>
    <shopro-auth-modal></shopro-auth-modal>
  </view>
</template>
<script>
import tools from '@/shopro/utils/tools';
const _delay = tools.delayDither(300);
import touxiang from '@/static/images/moren.png';
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  data() {
    return {
      nan: true,
      showTitle: true,
      imgList: [],
      touxiang: touxiang,
      boxNumber: null,
    };
  },
  // 计算属性 适配者模式
  computed: {
    ...mapGetters([
      'initShop',
      'userTemplate',
      'isLogin',
      'userInfo',
      'authType',
      'token',
    ]),
  },
  // 数据监听
  watch: {
    userInfo(item) {
      this.getBoxNumber();
    },
  },
  /**
   * 生命周期 类似 发布订阅者模式
   */
  //监听页面初始化，其参数同 onLoad 参数 触发时机早于 onLoad 百度小程序
  //onInit() {},
  /** 监听页面加载
   * 其参数为上个页面传递的数据，
   * 参数类型为 Object（用于页面传参）
   */
  mounted() {},
  onLoad() {},
  // 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
  onShow() {
    this.getUserData();
    this.getUserInfo();
    this.getSlideshow();
    this.getBoxNumber();
	
  },
  // 监听页面初次渲染完成 注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  // 监听页面隐藏
  onHide() {},
  // 监听页面卸载
  onUnload() {},
  methods: {
    ...mapActions(['getUserInfo', 'showAuthModal', 'getUserData', 'autoLogin']),
    // 获取轮播图
    getSlideshow() {
      this.$http('v1.getSlideshow', {}, '加载中').then((res) => {
        if (res.code === 1) {
          this.imgList = res.data;
        }
      });
    },
    onAutoLogin() {
      if (!this.userInfo.avatar && !this.userInfo.nickname) {
        this.autoLogin();
      } else {
        uni.navigateTo({
          url: '/pages/app/member/index',
        });
      }
    },
    getBoxNumber() {
      setTimeout(() => {
        if (this.userInfo.id) {
          this.$http('v1.boxcabinet', {
            id: this.userInfo.id,
          }).then((res) => {
            this.boxNumber = res.data;
          });
        }
      }, 2000);
    },
    onclickHandle(ev, name, data = {}) {
      _delay(() => {
        switch (name) {
          case 'toAllOrder':
            this.toAllOrder();
            break;
          case 'togerenxinxi':
            this.togerenxinxi();
            break;
          case 'toMyWallet':
            this.toMyWallet();
            break;
          case 'toMyAddress':
            this.toMyAddress();
            break;
          case 'toNopay':
            this.$Router.push({
              path: '/pages/my_order/my_order',
              query: { orderType: 'unpaid' },
            });
            break;
          case 'toNosend':
            this.$Router.push({
              path: '/pages/my_order/my_order',
              query: { orderType: 'undelivered' },
            });
            break;
          case 'toNoget':
            this.$Router.push({
              path: '/pages/my_order/my_order',
              query: { orderType: 'unreceived' },
            });
            break;
          case 'noComment':
            this.$Router.push({
              path: '/pages/my_order/my_order',
              query: { orderType: 'complete' },
            });
            break;
          case 'afterSales':
            this.$Router.push({
              path: '/pages/my_order/my_order',
              query: { orderType: 'refund' },
            });
            break;
          case 'toHis':
            this.$Router.push({
              path: '/pages/user/hisFoot',
            });
            break;
          case 'toCoupon':
            this.$Router.push({
              path: '/pages/app/coupon/list',
            });
            break;
          case 'inprops':
            this.$Router.push({
              path: '/pages/fullopen/myprops',
            });
            break;
          case 'tixing':
            this.tixing();
            break;
          case 'distribution':
            this.distribution();
            break;
          case 'toCart':
            uni.switchTab({
              url: '/pages/index/cart',
            });
        }
      });
    },
    toAllOrder() {
      this.$Router.push({
        path: '/pages/my_order/my_order',
        query: { orderType: 'all' },
      });
      // this.$Router.push({
      //   path: '/pages/order/list',
      // });
      // url: 'pages/order/list',
    },
    togerenxinxi() {
      uni.navigateTo({
        url: 'pages/user/info',
      });
    },
    toMyWallet() {
      uni.navigateTo({
        url: 'pages/user/wallet/index',
      });
    },
    toMyAddress() {
      uni.navigateTo({
        url: 'pages/user/address/list',
      });
    },
    //未开放功能提醒正在努力开发中~
    tixing() {
      uni.showToast({
        title: '正在努力开发中~',
        duration: 2000,
        icon: 'none',
      });
    },
    //跳转分销中心
    distribution() {
      this.$http('v1.distribution', {}, '加载中').then((res) => {
        if (res.code === 1) {
          if (res.data.status == 1) {
            uni.navigateTo({
              url: 'pages/app/commission/index',
            });
          }
          if (res.data.status == 0) {
            uni.showToast({
              title: '正在努力开发中~',
              duration: 2000,
              icon: 'none',
            });
          }
        }
      });
    },
  },
  // 屏幕滚动20rpx时顶部标题消失
  onPageScroll(e) {
    if (e.scrollTop > 20) {
      this.showTitle = false;
    }
    if (e.scrollTop < 20) {
      this.showTitle = true;
    }
  },
};
</script>
<style lang="scss" scoped>
.me {
  .top_box {
    height: 724rpx;
    .biaoti {
      /deep/ .cu-bar {
        background-color: rgba(0, 0, 0, 0) !important;
      }
      /deep/ .u-flex {
        left: 38%;
      }
    }
    .noneBiaoti {
      display: none;
    }
    .back_img {
      height: 725rpx;
      width: 750rpx;
      position: absolute;
      top: 0;
      left: 0;
      img {
        width: 100%;
        height: 100%;
      }
      .me_box {
        height: 165rpx;
        width: 690rpx;
        display: flex;
        align-items: center;
        position: absolute;
        left: 30rpx;
        bottom: 410rpx;
        .photo {
          width: 160rpx;
          height: 160rpx;
          position: relative;
          margin-right: 26rpx;
          .photo_img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
          .nan_nv {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 35rpx;
            height: 35rpx;
            border-radius: 50%;
          }
        }
        .name {
          font-size: 40rpx;
          font-family: PingFang SC-Heavy, PingFang SC;
          font-weight: 700;
          color: #ffffff;
        }
      }
      .two_box {
        height: 140rpx;
        position: absolute;
        left: 80rpx;
        bottom: 225rpx;
        display: flex;
        .left {
          width: 284rpx;
          height: 140rpx;
          border-radius: 20rpx 20rpx 20rpx 20rpx;
          position: relative;
          img {
            width: 100%;
            height: 100%;
          }
          .yuer_text {
            position: absolute;
            left: 24rpx;
            top: 28rpx;
            font-size: 20rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 400;
            color: #727272;
          }
          .yuer {
            position: absolute;
            left: 24rpx;
            bottom: 14rpx;
            font-size: 50rpx;
            font-family: Oswald-Bold, Oswald;
            font-weight: 700;
            color: #323232;
            &.mini {
              font-size: 30rpx;
              bottom: 20rpx;
            }
          }
        }
        .right {
          width: 284rpx;
          height: 140rpx;
          border-radius: 20rpx 20rpx 20rpx 20rpx;
          position: relative;
          margin-left: 30rpx;
          img {
            width: 100%;
            height: 100%;
          }
          .yuer_text {
            position: absolute;
            left: 24rpx;
            top: 28rpx;
            font-size: 20rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 400;
            color: #727272;
          }
          .yuer {
            position: absolute;
            left: 24rpx;
            bottom: 14rpx;
            font-size: 50rpx;
            font-family: Oswald-Bold, Oswald;
            font-weight: 700;
            color: #323232;
          }
        }
      }
      .nav {
        height: 130rpx;
        width: 598rpx;
        position: absolute;
        left: 80rpx;
        bottom: 54rpx;
        display: flex;
        justify-content: space-between;
        .nav_box {
          width: 20%;
          height: 130rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          .top {
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;

            line-height: 100rpx;
            text-align: center;
            .top-icon {
              width: 100rpx;
              height: 100rpx;
            }
          }
          .text {
            font-size: 20rpx;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: 700;
            color: #3d3d3d;
          }
        }
      }
    }
  }
  .main {
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    width: 100%;
    padding: 32rpx 30rpx;
    margin-top: -20rpx;
    position: relative;
    .order {
      width: 690rpx;
      height: 217rpx;
      background: #ece6fd;
      box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      padding: 26rpx 35rpx;
      box-sizing: border-box;
      .top_line {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title {
          font-size: 22rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: 700;
          color: #111111;
        }
        .right {
          font-size: 18rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 400;
          color: #8c8c8c;
        }
      }
      .nav {
        width: 100%;
        height: 140rpx;
        display: flex;
        justify-content: space-evenly;
        margin-top: 10rpx;
        .box {
          width: 20%;
          height: 120rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          img {
            width: 90rpx;
            height: 90rpx;
          }
          text {
            font-size: 20rpx;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: 400;
            color: #3d3d3d;
          }
        }
      }
    }
    .top-swiper {
      height: 173rpx;
      width: 100%;
      box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      margin-top: 17rpx;
      img {
        width: 100%;
        height: 100%;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
      }
    }
    .server {
      width: 690rpx;
      height: 360rpx;
      background: #ffffff;
      box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      padding: 30rpx 35rpx;
      margin-top: 26rpx;
      .title {
        font-size: 22rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: 700;
        color: #111111;
      }
      .server_box {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        .box {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 20%;
          .tubiao {
            width: 100rpx;
            height: 100rpx;
            line-height: 100rpx;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            .iconfont {
              color: #3d3d3d;
              font-size: 56rpx;
            }
            img {
              width: 80rpx;
              height: 80rpx;
            }
          }
          .text {
            font-size: 20rpx;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: 400;
            color: #3d3d3d;
          }
        }
      }
    }
  }
}
.font-icon {
  font-size: 60rpx;
}
</style>
